/*! github.com/micmro/PerfCascade Version:2.6.3 (07/10/2019) */
.water-fall-chart {
  width: 100%;
  overflow: visible;
  font-size: 12px;
  line-height: 1em;
}
.water-fall-chart * {
  box-sizing: border-box;
}
.water-fall-chart button {
  cursor: pointer;
}

.water-fall-holder {
  fill: #ccc;
}

.water-fall-chart .left-fixed-holder {
  overflow: visible;
}
.water-fall-chart .marker-holder {
  width: 100%;
}
.water-fall-chart .line-label-holder {
  cursor: pointer;
}
.water-fall-chart .line-holder {
  stroke-width: 1;
  stroke: #ccc;
  stroke-opacity: 0.5;
  transition: all 60ms;
}
.water-fall-chart .line-holder .line-mark {
  fill: #69009e;
  opacity: 0.01;
  stroke-width: 0;
  transition: all 60ms;
}
.water-fall-chart .line-holder.active {
  stroke: #69009e;
  stroke-width: 2;
  stroke-opacity: 1;
}
.water-fall-chart .line-holder.active .line-mark {
  opacity: 0.4;
}
.water-fall-chart .type-onload .line-holder {
  stroke: #c0c0ff;
}
.water-fall-chart .type-oncontentload .line-holder {
  stroke: #d888df;
}

.water-fall-chart .labels {
  width: 100%;
}
.water-fall-chart .labels .inner-label {
  pointer-events: none;
}
.water-fall-chart .time-block.active {
  opacity: 0.8;
}
.water-fall-chart .line-end,
.water-fall-chart .line-start {
  display: none;
  stroke-width: 1;
  stroke-opacity: 0.5;
  stroke: #000;
}
.water-fall-chart .line-end.active,
.water-fall-chart .line-start.active {
  display: block;
}

.left-fixed-holder .label-full-bg {
  fill: #fff;
  opacity: 0.9;
}

.time-scale line {
  stroke: #0cc;
  stroke-width: 1;
}
.time-scale line.sub-second-line {
  stroke: #ccc;
  opacity: 0.75;
  stroke-width: 0.5;
}
.time-scale text {
  font-weight: bold;
}

.row-item {
  cursor: pointer;
}
.row-item .even {
  fill: #ccc;
  opacity: 0.05;
}
.row-item .odd {
  fill: #000;
  opacity: 0.05;
}
.row-item:hover .odd,
.row-item:hover .even {
  fill: #000;
  opacity: 0.1;
}

.row-item:focus {
  outline: solid 1.5px #aaa;
  outline-offset: -1.5px;
}
.row-item:focus .odd,
.row-item:focus .even {
  fill: #000;
  opacity: 0.2;
}

.row-item .rect-holder text {
  fill: #aaa;
}
.row-item.status5xx .even {
  fill: #f66;
}
.row-item.status5xx .odd {
  fill: #f00;
}
.row-item.status4xx .even {
  fill: #c33;
}
.row-item.status4xx .odd {
  fill: #c00;
}
.row-item.status3xx .even {
  fill: #ff6;
}
.row-item.status3xx .odd {
  fill: #ff0;
}

.row-item.status5xx .even,
.row-item.status5xx .odd,
.row-item.status4xx .even,
.row-item.status4xx .odd,
.row-item.status3xx .even,
.row-item.status3xx .odd {
  opacity: 0.3;
}
.row-item.status5xx:hover .even,
.row-item.status5xx:hover .odd,
.row-item.status4xx:hover .even,
.row-item.status4xx:hover .odd,
.row-item.status3xx:hover .even,
.row-item.status3xx:hover .odd {
  opacity: 0.5;
}

.tooltip-holder {
  overflow: visible;
}
.tooltip * {
  padding: 0;
  margin: 0;
}
.tooltip html {
  font-size: 10px;
  line-height: 1.2em;
}
.tooltip body {
  position: relative;
}
.tooltip-payload {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.25em;
  font-size: 10px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  border: solid 1px #f0f0f0;
  word-break: break-all;
  overflow-wrap: break-word;
  transition: opacity 300ms;
}
.tooltip-payload.no-anim {
  transition: none;
}

/** overlay animation settings **/
.water-fall-chart .line-label-holder,
.row-item,
.water-fall-chart .line-holder line,
.time-scale line,
.time-scale text {
  transition: transform 60ms;
}
.water-fall-chart.closing {
  transition-delay: 60ms;
}

.labels {
  overflow: hidden;
}

/*block colours for MIME types*/
.block-css {
  fill: #a6d18f;
}
.block-iframe,
.block-html,
.block-svg,
.block-internal {
  fill: #82a8de;
}
.block-img,
.block-image {
  fill: #b394cf;
}
.block-script,
.block-javascript,
.block-js {
  fill: #e0b483;
}
.block-link {
  fill: #89afe6;
}
.block-swf,
.block-flash {
  fill: #42aab1;
}
.block-font {
  fill: #e15d4e;
}
.block-xmlhttprequest,
.block-ajax {
  fill: #f00;
} /*remove?*/
.block-plain,
.block-other {
  fill: #b3b3b3;
}

/*block colours for Timing*/
.block-blocked {
  fill: #aaa;
}
.block-dns {
  fill: #159588;
}
.block-connect {
  fill: #fd9727;
}
.block-ssl {
  fill: #c141cd;
}
.block-send {
  fill: #b0bec5;
}
.block-wait {
  fill: #1ec659;
}
.block-receive {
  fill: #1eaaf1;
}
.block-undefined {
  fill: #0f0;
}

/* Info overlay SVG - wrapper */
.info-overlay-bg {
  fill: #fff;
  stroke: #cdcdcd;
}
.info-overlay-close-btn {
  fill: rgba(205, 205, 205, 0.8);
  transform: translate(-23px, -23px);
  cursor: pointer;
}
.info-overlay-close-btn text {
  fill: #111;
  pointer-events: none;
}
.info-overlay-close-btn:focus {
  border: solid 1px #36c;
}

/* Info overlay SVG - timings tab */
.info-overlay-holder .connect {
  border-right: solid 5px #fd9727;
  padding-right: 5px;
}
.info-overlay-holder .blocked {
  border-right: solid 5px #aaa;
  padding-right: 5px;
}
.info-overlay-holder .ssltls {
  border-right: solid 5px #c141cd;
  padding-right: 5px;
}
.info-overlay-holder .send {
  border-right: solid 5px #b0bec5;
  padding-right: 5px;
}
.info-overlay-holder .wait {
  border-right: solid 5px #1ec659;
  padding-right: 5px;
}
.info-overlay-holder .receive {
  border-right: solid 5px #1eaaf1;
  padding-right: 5px;
}
.info-overlay-holder .dns {
  border-right: solid 5px #159588;
  padding-right: 5px;
}

/* Info overlay HTML - types */
.type-css {
  background: #406b29;
} /*a6d18f - 40%*/
.type-iframe,
.type-html,
.type-svg,
.type-internal {
  background: #1c4278;
} /*82a8de - 40%*/
.type-img,
.type-image {
  background: #4d2e69;
} /*b394cf - 40%*/
.type-script,
.type-javascript,
.type-js {
  background: #7a4e1d;
} /*e0b483 - 40%*/
.type-link {
  background: #89afe6;
} /*89afe6 - 40%*/
.type-swf,
.type-flash {
  background: #234980;
} /*#42aab1 - 40%*/
.type-font {
  background: #ae2a1b;
} /*#e15d4e - 40%*/
.type-xmlhttprequest,
.type-ajax {
  background: #cc0000;
} /* f00 40%*/
.type-plain,
.type-other {
  background: #808080;
} /*#b3b3b3 - 40%*/

/* Info overlay HTML - base */
.info-overlay-holder * {
  padding: 0;
  margin: 0;
  font-size: 12px;
}
.info-overlay-holder body {
  position: relative;
  height: 450px;
  clear: both;
  padding: 0;
  margin: 0;
  width: 100%;
  background: #fff;
  color: #666;
}
.info-overlay-holder body .wrapper {
  height: 450px;
  width: 100%;
  overflow: scroll;
}

/* Info overlay HTML - header */
.info-overlay-holder header {
  position: relative;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.25);
}
.info-overlay-holder header,
.info-overlay-holder header a,
.info-overlay-holder header button {
  color: #fff;
  text-decoration: none;
}
.info-overlay-holder header a:hover,
.info-overlay-holder header a:focus {
  text-decoration: underline;
}
.info-overlay-holder .requestID {
  font-weight: bold;
}
.info-overlay-holder h3,
.info-overlay-holder h3 a {
  font-size: 1.1em;
  padding: 1em;
  margin: 0;
  font-weight: normal;
  overflow-wrap: break-word;
}
.info-overlay-holder h3 strong {
  font-size: 1.1em;
}
.info-overlay-holder .tab-nav ul {
  margin: 0;
  padding: 0;
}
.info-overlay-holder .tab-nav li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.info-overlay-holder button {
  background: transparent;
  outline: 0;
  border: 0;
  border-bottom: solid 2px transparent;
  padding: 0.5em 1em;
  margin: 0 0.25em;
}
.info-overlay-holder li:first-child button {
  margin-left: 1em;
}
.info-overlay-holder button:focus,
.info-overlay-holder button.active:focus,
.info-overlay-holder button:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.info-overlay-holder button.active {
  border-color: #fff;
  cursor: default;
}
.info-overlay-holder button.active:focus {
  border-color: rgba(255, 255, 255, 0.8);
}
.info-overlay-holder button.copy-tab-data {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  border: 0;
  margin: 0;
  border-radius: 1em;
  background: #e0e0e0;
}
.info-overlay-holder button.copy-tab-data:focus,
.info-overlay-holder button.copy-tab-data:hover {
  background: #ccc;
}

/* Info overlay HTML - content */
.info-overlay-holder dt {
  float: left;
  clear: both;
  margin-top: 0.5em;
  width: 25%;
  text-align: right;
  font-weight: bold;
}
.info-overlay-holder dd {
  float: left;
  width: 73%;
  margin: 0.5em 0 0 2%;
  padding: 0 0 0.5em 0;
}
.info-overlay-holder dt:after {
  content: ":";
}
.info-overlay-holder pre {
  font-size: 11px;
  line-height: 23px;
  border-radius: 0;
  background: #f6f3f3;
}

.info-overlay-holder .tab {
  float: left;
  position: relative;
  width: 100%;
  height: 350px;
  padding: 12px 12px 24px;
}
.info-overlay-holder .tab h2 {
  font-size: 1.2em;
  margin: 0.5em 0 0;
  padding: 0.5em 0 0.5em 1em;
  clear: both;
  border-top: solid 1px #efefef;
}
.info-overlay-holder .tab h2:first-child {
  border-top: 0;
  padding-top: 0;
}
.info-overlay-holder .tab pre {
  overflow-y: hidden;
  width: 100%;
  min-height: 100%;
}
.info-overlay-holder .tab .preview {
  width: auto;
  max-width: 100%;
  max-height: 500px;
  border: solid 1px #666;
}
.info-overlay-holder .tab dl:after {
  content: "";
  display: table;
  clear: both;
}
.info-overlay-holder .tab.rendered-data {
  padding: 0;
}
.info-overlay-holder .tab.rendered-data pre {
  padding: 12px 12px 24px;
}
.info-overlay-holder .tab.rendered-data pre > code {
  white-space: pre-wrap;
}

/** Legend */
.resource-legend {
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  line-height: 1.5em;
  display: inline-block;
}
.resource-legend li {
  margin: 0 1em 0 0;
  padding: 0;
  white-space: nowrap;
  display: inline-block;
}
.resource-legend li:before {
  content: "";
  width: 1em;
  height: 1em;
  margin: 0 0.5em 0 0;
  vertical-align: text-top;
  display: inline-block;
}

.resource-legend .legend-blocked:before {
  background: #aaa;
}
.resource-legend .legend-dns:before {
  background: #159588;
}
.resource-legend .legend-connect:before {
  background: #fd9727;
}
.resource-legend .legend-ssl:before {
  background: #c141cd;
}
.resource-legend .legend-send:before {
  background: #b0bec5;
}
.resource-legend .legend-wait:before {
  background: #1ec659;
}
.resource-legend .legend-receive:before {
  background: #1eaaf1;
}

.icon {
  fill: #666;
}

.icon-4xx,
.icon-5xx,
.icon-no-cache,
.icon-no-gzip,
.icon-warning {
  fill: #b55;
}
